<template>
  <div class="app-container">
    <!-- Header 区域 -->
    <cart-header></cart-header>

    <!-- 商品 Item 项组件 -->
    <cart-item v-for="item in cartList" :key="item.id" :item="item"></cart-item>

    <!-- Foote 区域 -->
    <cart-footer></cart-footer>
  </div>
</template>

<script>
import CartHeader from '@/components/cart-header.vue'
import CartFooter from '@/components/cart-footer.vue'
import CartItem from '@/components/cart-item.vue'

// 简化actions
import { mapActions, mapState, mapMutations } from 'vuex'

export default {
  name: 'App',
  components: {
    CartHeader,
    CartFooter,
    CartItem
  },
  computed: {
    ...mapState('cart', ['cartList'])
  },
  created () {
    // this.$store.dispatch('cart/reqCartList')
    this.reqCartList()

    // this.$store.dispatch('cart/changeCount')
    // this.$store.commit('cart/changeCount')

    this.acChangeCount()
    this.muChangeCount()
  },
  methods: {
    // ...mapActions('cart', ['reqCartList', 'changeCount']),
    ...mapActions('cart', {
      reqCartList: 'reqCartList',
      acChangeCount: 'changeCount'
    }),
    // 左边是要改的名字，右边是原来的名字
    ...mapMutations('cart', { muChangeCount: 'changeCount' })
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 50px 0;
  font-size: 14px;
}
</style>
